.mu-card {
  --mu-book-item-num: 4;
  display: flex;
  flex-wrap: wrap;
}

html[data-theme="light"] {
  blockquote {
    background-color: #ecf8f2;
  }
}
html[data-theme="dark"] {
  blockquote {
    background-color: #232f29;
  }
}
.theme-hope-content {
  & > p {
    text-indent: 2em;
    img {
      display: block;
    }
  }
}
#main-content {
  .vp-article-cover {
    aspect-ratio: 3 / 1;
  }
  .page-cover img {
    -o-object-fit: fill;
    object-fit: fill;
    max-height: initial;
    aspect-ratio: 3 / 1;
  }
}

code {
  color: var(--theme-color);
}

blockquote {
  border-color: #42b983 !important;
  p {
    padding: 0.5rem 0;
  }
}

/* 媒体自适应 */

/* 小于 768px 《===》xs */
@media only screen and (max-width: 767px) {
  /* 在这里编写小于 768px 时应用的 CSS */
  .mu-card {
    --mu-book-item-num: 1;
  }
}

/* 大于等于 768px 《===》sm */
@media only screen and (min-width: 768px) {
  /* 在这里编写大于等于 768px 时应用的 CSS */
  .mu-card {
    --mu-book-item-num: 2;
  }
}

/* 大于等于 992px 《===》md */
@media only screen and (min-width: 992px) {
  /* 在这里编写大于等于 992px 时应用的 CSS */
  .mu-card {
    --mu-book-item-num: 3;
  }
}

/* 大于等于 1200px 《===》lg */
@media only screen and (min-width: 1200px) {
  /* 在这里编写大于等于 1200px 时应用的 CSS */
  .mu-card {
    --mu-book-item-num: 4;
  }
}

/* 大于等于 1920px 《===》xl */
@media only screen and (min-width: 1920px) {
  /* 在这里编写大于等于 1920px 时应用的 CSS */
  .mu-card {
    --mu-book-item-num: 4;
  }
}

.vp-card {
  max-width: initial;
  width: 80%;
  --line-clamp: 2;

  .vp-card-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: var(--line-clamp);
    -webkit-box-orient: vertical;
    min-height: 2.7em;
  }
}

@media (max-width: hope-config.$mobile) {
  .vp-card {
    width: 80%;
    --line-clamp: 3;
  }
}

@media (min-width: hope-config.$mobile) {
}

@media (min-width: hope-config.$tablet) {
}

@media (min-width: hope-config.$pad) {
  .vp-card {
    width: 40%;
    --line-clamp: 2;
  }
}

@media (min-width: hope-config.$laptop) {
  .vp-card {
    width: 42%;
    --line-clamp: 2;
  }
}

@media (min-width: hope-config.$pc) {
}

// 个人简历
.curriculum-vitae {
  .theme-hope-content {
    & > div {
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
    }
    p {
      text-indent: 0;
    }
  }
}
.vp-blog-type-button .icon-wrapper {
  box-sizing: content-box;
}

/**
* 美化各级标题
*/
#main-content {
  .theme-hope-content {
    h4 {
      --prefix-icon: "🍁";
    }
    h5 {
      --prefix-icon: "🌸";
    }
    h6 {
      --prefix-icon: "🍂";
    }

    h2 {
      border: none;
      .header-anchor {
        display: block;
        border-bottom: 4px solid #4dd0e1;
        position: relative;
        font-size: 24px;
        padding: 12px 32px;
        color: #4dd0e1;
        font-weight: 700;

        &::before,
        &::after {
          content: "";
          display: block;
          position: absolute;
          bottom: 0;
        }

        &::before {
          width: 24px;
          height: 24px;
          left: 0;
          top: 0;
          margin: auto;
          background-size: 24px 24px;
          background-image: url();
        }

        &::after {
          right: 0;
          width: 400px;
          height: 10px;
          border-top-right-radius: 24px;
          background: linear-gradient(90deg, transparent, #4dd0e1);
          max-width: 50vw;
        }
      }
    }
    h3 {
      border: none;
      .header-anchor {
        margin: 30px 0;
        font-size: 18px;
        position: relative;
        padding: 4px 32px;
        width: max-content;
        color: #4dd0e1;
        font-weight: 700;

        &::before,
        &::after {
          content: "";
          display: block;
          position: absolute;
          bottom: 0;
        }

        &::before {
          border-bottom: 2px solid #4dd0e1;
          width: 100%;
          content: "";
          display: block;
          height: 28px;
          position: absolute;
          left: 0;
          top: 0;
          bottom: -2px;
          margin: auto;
          background-size: 28px 28px;
          background-image: url();
          background-repeat: no-repeat;
          animation: h3AnimationBefore 2s infinite alternate;
        }

        &::after {
          content: "";
          display: block;
          width: 28px;
          height: 28px;
          position: absolute;
          border: 2px solid #4dd0e1;
          border-radius: 50%;
          right: -15px;
          top: 0;
          bottom: 0;
          margin: auto;
          background-size: 28px 28px;
          background-image: url();
          animation: h3AnimationAfter 2s infinite alternate;
        }
      }
    }

    h4,
    h5,
    h6 {
      .header-anchor {
        & > span {
          &::before {
            content: var(--prefix-icon);
          }
        }
      }
    }
  }
}

@keyframes h3AnimationBefore {
  0% {
    width: 28px;
  }

  25% {
    width: 100%;
  }
  50% {
    width: 100%;
  }
  100% {
    width: 100%;
  }
}

@keyframes h3AnimationAfter {
  0% {
    transform: rotate(0);
  }
  10% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1turn);
  }

  100% {
    transform: rotate(-1turn);
  }
}

.theme-hope-content table img {
  max-width: unset;
  display: block;
  height: 100%;
  width: 100%;
}
tbody tr:nth-child(odd) {
  background: transparent;
}
